<!--
 * @Author: yangmy
 * @Date: 2022-03-17 09:48:15
 * @FileDescription:
-->
<template>
  <div class="warning">
    <com-box :title="data.title">
      <template v-slot>
        <loading v-show="loading" />
        <div class="warning-top">
          <span>
            共有<text>{{ data.warningTotal }}</text
            >条预警信息,</span
          >
          <span>
            价格预警<text>{{ data.warningPrice }}</text
            >条,</span
          >
          <span>
            销售量预警<text>{{ data.warningSales }}</text
            >条</span
          >
        </div>
        <el-scrollbar
          height="207px"
          ref="scrollbar"
          @scroll="handleScroll"
          @mouseover="stopScroll"
          @mouseout="startScroll"
        >
          <div class="content">
            <ul style="width: 100%">
              <li
                class="content-item"
                v-for="item in data.data"
                :key="item.goodsCode"
                :style="{ background: item.background }"
              >
                <div class="content-item-left">
                  <p class="time">预警时间：{{ item.warningTime }}</p>
                  <div class="rise-box">
                    <img
                      v-if="item.warnLevel == '01'"
                      src="../img/yujing-green.png"
                      alt=""
                    />
                    <img
                      v-if="item.warnLevel == '02'"
                      src="../img/yujing-yellow.png"
                      alt=""
                    />
                    <img
                      v-if="item.warnLevel == '03'"
                      src="../img/yujing-red.png"
                      alt=""
                    />

                    <div class="rise-left">
                      <text class="rise">涨{{ item.riseFall }}</text>
                      <img src="../img/shangzhang.png" alt="" />
                    </div>
                  </div>
                </div>
                <div class="content-item-center">
                  <img :src="item.img" alt="" />
                  <text>{{ item.name }}</text>
                </div>
                <!-- &nbsp;&nbsp; -->
                <div class="content-item-right">
                  <div class="sale" v-if="item.warningTypeName.length == 2">
                    {{ item.warningTypeName.slice(0, 1) }}&nbsp;&nbsp;&nbsp;{{
                      item.warningTypeName.slice(1, 2)
                    }}：
                  </div>
                  <div class="sale" v-else>{{ item.warningTypeName }}：</div>
                  <div class="sale-num">
                    {{ item.avgPrice }} {{ item.unit }}
                  </div>
                </div>
              </li>
            </ul>
          </div>
        </el-scrollbar>
      </template>
    </com-box>
  </div>
</template>
<script lang="ts">
import {
  defineComponent,
  reactive,
  toRefs,
  onMounted,
  onBeforeUnmount,
  watch,
  ref
} from 'vue'
import comBox from '@/components/comBox/comBox.vue'
import loading from '@/charts/loading.vue'
import httpRequest from '@/service'
interface IState {
  timerFlag: boolean
  data: any
  loading: boolean
  timer: any
  getData: (val: any) => void
}
export default defineComponent({
  name: 'centerLower',
  components: {
    comBox,
    loading
  },
  props: {
    parameters: {
      type: Object,
      default: () => {
        return {
          adCode: '',
          classId: ''
        }
      }
    }
  },
  setup(props) {
    const state: IState = reactive({
      timerFlag: true,
      data: {},
      loading: false,
      timer: null,
      getData: (val) => {
        state.loading = true
        httpRequest
          .get({
            url: 'M3P2yjxx',
            params: {
              adcode: val.adcode,
              classId: val.classId === 'null' ? '' : val.classId
            }
          })
          .then((res) => {
            if (res.code == 200) {
              state.data = res
            }
            state.loading = false
          })
          .catch(() => {
            state.loading = false
            console.log('请求失败')
          })
      }
    })
    onMounted(() => {
      onScroll()
    })
    const scrollbar = ref()
    let curScrollTop = 0
    const onScroll = () => {
      state.timer = setInterval(() => {
        if (state.timerFlag) {
          curScrollTop++
          scrollbar.value?.setScrollTop(curScrollTop)
        }
        if (
          scrollbar.value &&
          curScrollTop - scrollbar.value.wrap$.scrollTop > 1
        ) {
          curScrollTop = 0
        }
      }, 50)
    }
    const stopScroll = () => {
      state.timerFlag = false
    }
    const startScroll = () => {
      state.timerFlag = true
      if (scrollbar.value) {
        curScrollTop = scrollbar.value.wrap$.scrollTop
      }
    }
    // 滚动时触发
    const handleScroll = (pos: any) => {
      curScrollTop = pos.scrollTop
    }
    onBeforeUnmount(() => {
      clearInterval(state.timer)
    })
    state.getData(props.parameters)
    watch(
      () => {
        return props.parameters
      },
      (val) => {
        state.getData(val)
      },
      {
        deep: true
      }
    )
    const { data, loading } = toRefs(state)
    return {
      data,
      loading,
      scrollbar,
      stopScroll,
      startScroll,
      handleScroll
    }
  }
})
</script>
<style lang="less" scoped>
.warning {
  height: 41.5%;
  position: relative;
  top: -85px;
  width: 96%;
  margin: 0 auto;
}
.warning-top {
  background-size: 100% 100%;
  width: 100%;
  height: 33px;
  background: linear-gradient(to left, #0a247b, rgba(22, 107, 235), #0a247b);
  margin: 3px 0 3px 0;
  text-align: center;
  font-size: 14px;
  line-height: 33px;
  font-family: 'Microsoft YaHei';
  color: rgb(255, 255, 255);
  span {
    text {
      color: #ffe611;
      font-size: 18px;
      font-family: 'AliHYAiHei';
      margin: 0 5px;
    }
  }
}
.content {
  height: 82%;
  overflow-y: scroll;
  .content-item {
    background-color: rgba(0, 71, 157, 0.1);
    width: 97%;
    height: 65px;
    display: flex;
    align-items: center;
    margin: 3px auto;
    .time {
      font-size: 13px;
      font-family: 'Microsoft YaHei';
      color: rgb(13, 146, 255);
      padding-bottom: 5px;
    }
    .content-item-left {
      width: 30%;
      text-align: center;
      .rise-box {
        display: flex;
        align-items: center;
        justify-content: space-evenly;
        .rise-left {
          display: flex;
          align-items: center;
          width: 44%;
          justify-content: space-between;
        }
      }
      .rise {
        font-size: 14px;
        font-family: 'Microsoft YaHei';
        color: #fea12b;
        padding-right: 5px;
        font-weight: 600;
      }
    }
    .content-item-center {
      display: flex;
      align-items: center;
      width: 31%;
      justify-content: flex-start;
      text {
        font-size: 20px;
        font-family: 'Microsoft YaHei';
        color: rgb(255, 255, 255);
        padding-left: 5px;
        font-weight: 550;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      img {
        max-width: 80px;
      }
    }
    .content-item-right {
      display: flex;
      align-items: baseline;
      width: 38%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      .sale {
        width: 62px;
        font-size: 16px;
        font-family: 'Microsoft YaHei';
        color: rgb(13, 146, 255);
      }
      .sale-num {
        font-size: 18px;
        font-family: 'Microsoft YaHei';
        color: #0debff;
        font-weight: 550;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
  }
}
.content-box {
  transition: all 1s linear;
  margin-top: -64px;
}
.marquee_top {
  transition: all 1s linear;
  margin-top: -64px;
}
</style>
